<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控件</title>
    <script src="../v7.1.0/en/latest/ol/dist/ol.js"></script>
    <link rel="stylesheet" href="../v7.1.0/en/latest/ol/ol.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            min-height: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM(),
                    // visible: false
                })
            ],
            view: new ol.View({
                projection: ol.proj.get('EPSG:3857'),
                center: ol.proj.transform([113.65, 34.75], 'EPSG:4326', 'EPSG:3857'),
                zoom: 5
            }),
            controls: ol.control.defaults.defaults({
                // 移除归属控件
                attribution: false,
                // 移除缩放控件 
                // zoom:false,
                // 移除旋转控件
                rotate: false
            })
        });
        map.addControl(new ol.control.ZoomSlider());//缩放尺
        map.addControl(
            new ol.control.OverviewMap({//鹰眼
                // collapsed: false//缩
                layers:[
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            }));
        map.addControl(new ol.control.FullScreen());//全屏
        map.addControl(new ol.control.ZoomToExtent({ // 缩放至特定位置控件      
            extent: [
                12667718, 2562800,//矩形左上坐标
                12718359, 2597725//矩形右上坐标
            ]
        })
        );
        map.addControl(new ol.control.MousePosition());//拾取
        map.addControl(new ol.control.ScaleLine());//比例尺

    </script>
</body>

</html>